<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jquery插件Zclip实现复制页面内容到剪贴板兼容各浏览器</title>
<style type="text/css">
.demo{width:760px; margin:40px auto 0 auto; min-height:150px;}
textarea{width:100%; height:80px; border:1px solid #ddd; color:#666}
#para{line-height:24px; background:#f7f7f7; padding:10px}
.copy{line-height:32px}
#msg{margin-left:10px; color:green; border:1px solid #3c3; background:url(checkmark.png) no-repeat 2px 3px; padding:3px 6px 3px 20px}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.zclip.min.js"></script>
<script type="text/javascript">
$(function(){
	$('#copy_input').zclip({
		path: 'js/ZeroClipboard.swf',
		copy: function(){
			return $('#mytext').val();
		},
		afterCopy: function(){
			$("<span id='msg'/>").insertAfter($('#copy_input')).text('复制成功').fadeOut(2000);
		}
	});
	$("#copy_p").zclip({
		path: 'js/ZeroClipboard.swf',
		copy: $('#para').text()+"www.bcty365.com",
		afterCopy: function(){
			$("#para").css("background-color",'#cff');
			$("<span id='msg'/>").insertAfter($('#copy_p')).text('复制成功').fadeOut(2000);
		}
	});
	$('#mytext').focus(function(){
		var txt = $(this).val();
		if(txt=='请输入内容'){
			$(this).val('');
		}
	});
});
</script>
</head>

<body>

<div id="main">
   <div class="demo">
   		<textarea id="mytext">请输入内容</textarea><br/>
        <a href="#" id="copy_input" class="copy">复制内容</a>
   </div>
   <div class="demo">
   		<p id="para">zclip是一个轻量级基于JQuery“复制到剪贴板”插件。</p>
        <a href="#" id="copy_p" class="copy">复制内容</a>
   </div>

</div>

</body>
</html>